<template>
    <div class="components_edit_modal">
        <el-dialog width="1200px" title="教学服务支持计划详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
                <el-form ref="professionParams"label-position="right">
                <div class="el-form-item lineblock">
                       <label class="el-form-item__label">计划名称：</label>
                       <span class="el-form-item__content">{{dialogName}}</span>
                   </div>
                   <div class="el-form-item is-required lineblock">
                       <label class="el-form-item__label">教学大纲：</label>
                       <div class="el-form-item__content">
                          <a v-for="item in attachment" :href="item.fileStoreName">{{item.fileRealName}}</a>
                       </div>
                   </div>
                
                        <div class="scrollBarX">
                            <el-table :data="weekSelecttList"  border stripe style="width: 100%" >
                                <el-table-column  prop="teachWeek" :formatter="formatWeek"  label="周次" align="center"></el-table-column>
                                <!-- <el-table-column  prop="beginTime"  label="开始时间"  align="center">
                                </el-table-column>
                                <el-table-column  prop="endTime"  label="结束时间" align="center"> -->
                                </el-table-column>
                                <el-table-column prop="courseName"  label="课程" align="center">
                                </el-table-column>
                                <el-table-column  prop="classPeriod"  label="课时" align="center">
                                </el-table-column>
                               <el-table-column   prop="resourceRequirement"  label="资源要求" align="center">
                               </el-table-column>
                               <el-table-column  prop="supportPoint"  label="支持点" align="center">
                               </el-table-column>
                               <el-table-column  prop="supportContent"  label="支持内容" align="center">
                               </el-table-column>
                               <el-table-column  prop="remark"  label="备注" align="center">
                               </el-table-column>
                            </el-table>
                        </div>
                        </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    export default {
        data() {
            return {
                // state:false,
                dialogName:null,
                row:null,
                weekSelecttList:[],//整理后的数据格式
                attachment:[],
            }
        },
        created() {},
        mounted() {},
        computed: {
            state: {
                get: function () {
                    if(this.$store.getters.getTeachSupportDetail.state == true){
                        this.state = true;
                        this.getTeachSupportDetail(this.$store.getters.getTeachSupportDetail.data);
                    }
                    return this.$store.getters.getTeachSupportDetail.state;
                },
                set: function (v) {
                   if(!v){
                        this.$store.commit("TEACH_SUPPORT_DETAIL", {dialogState: v, data: null});
                   }
                }
            }
        },
        methods: {
            // 打开模态框
            showDialog(row,bool){
                this.row=row;
                this.state = true;
                this.edited = bool;
                this.getTeachSupportDetail(row.teachSupportBase.id);
            },
            //获取详情
            getTeachSupportDetail(id){
                let self = this;
                self.axios.get(api.teachSupport.detail+id)
                .then((response) => {
                    if(response.data.success){
                        self.dialogName = response.data.data.planName;
                        let supportPlanList = response.data.data.teachSupportPlanList;
                        let weekSelecttList = [];
                        self.attachment = response.data.data.attachment;
                        for(let i=0;i<supportPlanList.length;i++){
                            let item = {
                                index:i,
                                id:supportPlanList[i].id,
                                teachWeek:supportPlanList[i].teachWeek,
                                beginTime:supportPlanList[i].beginTime,
                                endTime:supportPlanList[i].endTime,
                                courseNo:supportPlanList[i].courseNo,
                                courseName:supportPlanList[i].courseName,
                                classPeriod:supportPlanList[i].classPeriod,
                                resourceRequirement:supportPlanList[i].resourceRequirement,
                                supportPoint:supportPlanList[i].supportPoint,
                                supportContent:supportPlanList[i].supportContent,
                                remark:supportPlanList[i].remark,
                            }
                            weekSelecttList.push(item);
                        }
                        self.weekSelecttList = weekSelecttList;
                        // console.log(JSON.stringify(response.data.data));
                    }else {
                        self.$message.error(response.data.msg);
                    }
                });
            },
            
            formatWeek(row, column, cellValue){
                return "第"+cellValue+"周";
            },
        },
        

    };
</script>
<style scoped>
.components_edit_modal .el-form-item{
    margin-bottom: 0;
}
.components_edit_modal .el-form-item__label{
    width: 90px;
}
.el-form-item{
    margin-bottom: 0;
}
.selectContainer{
    background-color: #fff;
    margin-left: 25px;
    width:210px;
    height:181px;
    border: 1px solid #00BBBD;
}
.selectContainer .item{
    width:30px;
    height:30px;
    text-align: center;
}
.opration_button{
    margin:10px;
}
</style>